//tabs 切换组件
import { defineComponent, PropType, ref } from 'vue';
import { Tab } from "./Tab";
import s from './Tabs.module.scss';
export const Tabs = defineComponent({
    props: {
        selected: {
            type: String as PropType<string>
        },
        classPrefix: {//自定义属性名
            type: String
        },
    },
    setup: (props, context) => {
        return () => {
            const array = context.slots.default?.()
            if (!array) return () => null
            for (let i = 0; i < array.length; i++) {
                if (array[i].type != Tab) {
                    throw new Error("<Tabs> only accepts <Tab> as child")
                }
            }
            return <div  >
                <ol class={s.nav}>
                    {
                        array.map(item => <li class={item.props?.name === props.selected ? s.selected : ""}
                            onClick={() => context.emit('update:selected', item.props?.name)} >

                            {item.props?.name}
                        </li>)
                    }
                </ol>
                <div>
                    {array.find(item => item.props?.name === props.selected)}
                </div>
            </div>
        }

    }
})

